Hello and welcome.
In this lecture we are going to create functionality for our projet.
To save time.
I've already written the code.
Ah just run through the code line by line.
And one of the code is the doctype the doc type basically is a declaration to notify the web browsers
that the document that is about to be displayed on the content of the documents is an hastier mail five
document the actual hate mail start from line to and ends on line 19.
There is some indentation.
So looking at the indentation you can tell that the head tag which is online in 3 to 5 is a child of
the haysi Male.
Also the body tag which is from Line 6 to line 18 is a child of the hastier male tag.
They title tag online for is child to the head tag while the head behaves one tag online day each one
is a chart of the body.
I have attached an attribute to the hate wan tag on line 7.
The attribute is and is this style when you are playing Sear's says in line you apply it as an attribute
this style becomes an attribute and the value is of value you will specify for your success.
So I specified a text a line to be sentence that wanted text for the title this title here in white.
I want it to be centred.
That's what line 7 is saying and you can see the opening tag and the closing tag here on line.
This line here so every tab should have an opening and closing.
You can tell the close in by the forward slash before the element is closed on line 7.
We've got the image.
I got it image tag I'll give it an idea of who I'd Bob k.
We've attached an on Click event.
This is what we'll use to switch between the light.
Bob's this on click so on quick once you click on it it would trigger off a function called Bob's which
we have defined down here are like functions in a minute.
So line Kate the image tag.
Got an idea.
Like.
And there is an OK quick event has been attached to it and I've set it to equals tool Bob's Suite which
is defined below in the script.
So when the block when the Bob is clicked it will call this function I have defined here and it all.
Pass this source here equals to this light off the light off.
Is this image here.
Will not be like box when he's off and giving it a we've made it.
These are the types some styling to the like Bob.
So giving it a height cause I saw a value giving it with height and the margin as well giving in margin
from left to move 350 pigs 320 pig saws margin from the top 50 pixels.
So that's the hastier male singer says out of the way.
Now this song chant We are attached to this in this on click here is like Bob.
This is where we describe the function in between discreate tack.
All right so I could have easily put this on an external script but just because it's not a very big
function.
I decided to leave it on the same document is good practice it's always separate your -- jazz groups
he says he and his team and the into separate files because this is his very smart projet have decided
to leave it on the same page the same document.
So to create information online.
You type in the word function followed by space and then the name you want to call the function.
In this case I call the function Bob switch where you define it from choice you have to enclose parentheses
in case you have any arguments to pass inside that and then you have the curly braces the opening.
And they close in between the calibrators is where you you attach the things you want the function to
do when the function is called
Line 11 I've defined a variable called Bob and I have set it to equal.
So documents get elemen by an idea and the idea is like Bob this here which is this image here.
So that's the idea talking about.
So it will grab this image here.
That's what this light piece.
And then attached a conditional statement on line 12 seeing if the Bob this source of the Bob matches
this light on I'll quote one unquote only missed call light on what is sin here.
If this source matches the light on four matches this light on image here then the Bob dot source gives
you this.
So if he might is that display this one that's you know that's what he's saying else.
If it doesn't match that then display this.
So this is how this switch is so if it's if this matches one display the earlier the other one matches
the display the other and that's what he's saying.
If this matches this image right on display this image light off doesn't match dent display the image
light off.
That's basically what the script is saying.
So I just save the document and then let's view our project.
So this is what our project looks like you saw were saying the moment if the image matches this then
if we click it will give us that image source.
So he always reverses the images on the click click on that and gives me the other one click gives me
the other so that's it for list projet Thanks for watching.
There's any aspect you tonight understand please feel free to let me know.
Thanks.
Bye for now.